<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Dashboard">
        <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

        <title>DASHGUM - FREE Bootstrap Admin Template</title>

        <!-- Bootstrap core CSS -->
        <link href="assets/css/bootstrap.css" rel="stylesheet">
        <!--external css-->
        <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="assets/css/zabuto_calendar.css">
        <link rel="stylesheet" type="text/css" href="assets/js/gritter/css/jquery.gritter.css"/>
        <link rel="stylesheet" type="text/css" href="assets/lineicons/style.css">

        <!-- Custom styles for this template -->
        <link href="assets/css/style.css" rel="stylesheet">
        <link href="assets/css/style-responsive.css" rel="stylesheet">

        <script src="assets/js/chart-master/Chart.js"></script>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

    <section id="container">
        <!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
        <!--header start-->
        <header class="header black-bg">
            <div class="sidebar-toggle-box">
                <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
            </div>
            <!--logo start-->
            <a href="index.html" class="logo"><b>DASHGUM FREE</b></a>
            <!--logo end-->
            <div class="nav notify-row" id="top_menu">
                <!--  notification start -->
                <ul class="nav top-menu">
                    <!-- settings start -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                            <i class="fa fa-tasks"></i>
                            <span class="badge bg-theme">4</span>
                        </a>
                        <ul class="dropdown-menu extended tasks-bar">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">You have 4 pending tasks</p>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">DashGum Admin Panel</div>
                                        <div class="percent">40%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">Database Update</div>
                                        <div class="percent">60%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">Product Development</div>
                                        <div class="percent">80%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                            <span class="sr-only">80% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">Payments Sent</div>
                                        <div class="percent">70%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                                            <span class="sr-only">70% Complete (Important)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="external">
                                <a href="#">See All Tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- settings end -->
                    <!-- inbox dropdown start-->
                    <li id="header_inbox_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge bg-theme">5</span>
                        </a>
                        <ul class="dropdown-menu extended inbox">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">You have 5 new messages</p>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-zac.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Zac Snider</span>
                                        <span class="time">Just now</span>
                                        </span>
                                    <span class="message">
                                            Hi mate, how is everything?
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-divya.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Divya Manian</span>
                                        <span class="time">40 mins.</span>
                                        </span>
                                    <span class="message">
                                         Hi, I need your help with this.
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-danro.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Dan Rogers</span>
                                        <span class="time">2 hrs.</span>
                                        </span>
                                    <span class="message">
                                            Love your new Dashboard.
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-sherman.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Dj Sherman</span>
                                        <span class="time">4 hrs.</span>
                                        </span>
                                    <span class="message">
                                            Please, answer asap.
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">See all messages</a>
                            </li>
                        </ul>
                    </li>
                    <!-- inbox dropdown end -->
                </ul>
                <!--  notification end -->
            </div>
            <div class="top-menu">
                <ul class="nav pull-right top-menu">
                    <li><a class="logout" href="/OASystem/logout">Logout</a></li>
                </ul>
            </div>
        </header>
        <!--header end-->

        <!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->

        <!--sidebar start-->
        <aside id="aside"></aside>
        <!--sidebar end-->

        <div class="copyrights">Collect from <a href="http://www.cssmoban.com/">网页模板</a></div>

        <!-- **********************************************************************************************************************************************************
        MAIN CONTENT
        *********************************************************************************************************************************************************** -->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper">
                <div class="row">
                    <!-- /col-lg-9 END SECTION MIDDLE -->
                    <div class="col-lg-9 main-chart">
                        <!-- input -->
                        <div style="margin-top: 45px;">
                            <h4 class="mb">
                                <i class="fa fa-angle-right"></i> Inline Form
                            </h4>
                            <form class="form-inline" role="form" id="form_query">
    <!--                            <input id="page" name="pn" type="hidden" value="1"/>-->
                                <div class="form-group">
                                        <label class="sr-only">Email  address</label>
                                    <input type="text" class="form-control" placeholder="User Name"
                                           name="search">
                                </div>
                                <button type="button" class="btn btn-theme" onclick="getUser()">Submit</button>
                            </form>
                        </div>
                        <!-- input -->
                        <div class="row mt">
                            <div class="col-md-12">
                                <div class="content-panel">
                                    <table class="table table-striped table-advance table-hover">
                                        <h4><i class="fa fa-angle-right"></i> Advanced Table</h4>
                                        <hr>
                                        <thead>
                                        <!-- table中标题 -->
                                        <tr>
                                            <th><i class="fa fa-bullhorn"></i> 管理员id</th>
                                            <th class="hidden-phone"><i class="fa fa-question-circle"></i> 登录名</th>
                                            <th><i class="fa fa-bookmark"></i> 密码</th>
                                            <th><i class=" fa fa-edit"></i> 管理员名称</th>
                                            <th><i class=" fa fa-edit"></i> 创建时间</th>
                                            <th><i class=" fa fa-edit"></i> Status</th>
                                            <th><i class=" fa fa-edit"></i> 头像</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>

                                        <tbody id="tbody">
                                        <!--通过添加节点实现操作-->
                                        </tbody>

                                    </table>
                                </div><!-- /content-panel -->
                            </div><!-- /col-md-12 -->
                        </div><!-- /row -->
                        <!-- 分页html标签 -->
                        <div class="card-body">
                            <nav aria-label="Page navigation example" id="page_nav"
                                 style="margin-right: 20px;">
                            </nav>
                        </div>
                        <!-- 分页html标签 -->

                    </div>
                    <!-- /col-lg-9 END SECTION MIDDLE -->

                    <!-- /col-lg-3 -->
                    <div class="col-lg-3 ds">
                        <!--COMPLETED ACTIONS DONUTS CHART-->
                        <h3>NOTIFICATIONS</h3>

                        <!-- First Action -->
                        <div class="desc">
                            <div class="thumb">
                                <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
                            </div>
                            <div class="details">
                                <p>
                                    <muted>2 Minutes Ago</muted>
                                    <br/>
                                    <a href="#">James Brown</a> subscribed to your newsletter.<br/>
                                </p>
                            </div>
                        </div>
                        <!-- Second Action -->
                        <div class="desc">
                            <div class="thumb">
                                <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
                            </div>
                            <div class="details">
                                <p>
                                    <muted>3 Hours Ago</muted>
                                    <br/>
                                    <a href="#">Diana Kennedy</a> purchased a year subscription.<br/>
                                </p>
                            </div>
                        </div>
                        <!-- Third Action -->
                        <div class="desc">
                            <div class="thumb">
                                <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
                            </div>
                            <div class="details">
                                <p>
                                    <muted>7 Hours Ago</muted>
                                    <br/>
                                    <a href="#">Brandon Page</a> purchased a year subscription.<br/>
                                </p>
                            </div>
                        </div>
                        <!-- Fourth Action -->
                        <div class="desc">
                            <div class="thumb">
                                <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
                            </div>
                            <div class="details">
                                <p>
                                    <muted>11 Hours Ago</muted>
                                    <br/>
                                    <a href="#">Mark Twain</a> commented your post.<br/>
                                </p>
                            </div>
                        </div>

                        <!-- CALENDAR-->
                        <div id="calendar" class="mb">
                            <div class="panel green-panel no-margin">
                                <div class="panel-body">
                                    <div id="date-popover" class="popover top"
                                         style="cursor: pointer; disadding: block; margin-left: 33%; margin-top: -50px; width: 175px;">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title" style="disadding: none;"></h3>
                                        <div id="date-popover-content" class="popover-content"></div>
                                    </div>
                                    <div id="my-calendar"></div>
                                </div>
                            </div>
                        </div><!-- / calendar -->

                    </div>
                    <!-- /col-lg-3 -->

                </div>
            </section>
        </section>

        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2014 - Alvarez.is - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
                - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                <a href="index.html#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="demo.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="assets/js/jquery.scrollTo.min.js"></script>
    <script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="assets/js/jquery.sparkline.js"></script>

    <script>
        //通过表单实现数据切换
        //查询请求--模糊查询请求
        function getUser(page,size) {
            //1、清空原有的节点数据
            $('#tbody').empty();
            $('#page_nav').empty();
            //获取表单数据
            var data = $('#form_query').serializeArray();
            //页码的合理化判断
            if (page === undefined || page <= 0) {
                page = 1;
            }
            if (size === undefined) {
               size = 4;
            }
            //提交查询请求
            $.post('/OASystem/queryUser',
                    {'pn': page, "search": data[0].value,"pageSize":size},
                function (result) {
                    //判断当页是否没有数据了
                    if (result.userList.length === 0 && page > 1) {
                        //调用分页查询
                        getUser(page - 1,size);
                    } else {
                        for (var i = 0; i < result.userList.length; i++) {
                            var item = result.userList[i];
                            var tr = $('<tr></tr>');//创建一个tr节点
                            //在tr中添加多个td单元格
                            tr.append($('<td><a href="basic_table.html#">' + item.id + '</a></td>'));
                            tr.append($('<td class="hidden-phone">' + item.loginname + '</td>'));
                            tr.append($('<td>' + item.password + '</td>'));
                            tr.append($('<td><span class="label label-info label-mini">' + item.username + '</span></td>'));
                            tr.append($('<td>' + item.createdate + '</td>'));
                            var status = (item.status == 1) ? '超级管理员' : '普通管理员';
                            tr.append($('<td>' + status + '</td>'));
                            tr.append($('<td>' + item.imgname + '</td>'));
                            var tditem = $('<td></td>');
                            tditem.append($(' <button class="btn btn-primary btn-xs" onclick="onUpdate(this)"  type="button">' +
                                '<i class="fa fa-pencil"></i>' +
                                '</button>'));
                            tditem.append($(' <button class="btn btn-danger btn-xs" onclick="deleteUser(' + page + ', ' + item.id + ')">' +
                                '<i style="color: white;"> <i  class="fa fa-trash-o "></i></i>' +
                                '</button>'));
                            tr.append(tditem);//添加按钮单元格
                            //把一列的节点对象添加到tbody中
                            $('#tbody').append(tr);
                        }
                        //获取分页节点，添加到page_nav中
                        $('#page_nav').append(getPageUl(result));
                        $('#pageSize').val(size);
                    }
                });
        }

        //删除操作的函数
        function deleteUser(page, id) {
            //1、删除数据
            $.post('/OASystem/deleteUser', {"id": id}, function (result) {
                //判断操作是否成功
                if (result.isok === true) {
                    alert("删除成功");
                    //2、重新查询
                    //1、把tbody和分页标签的清空
                    $('#tbody').empty();
                    $('#page_nav').empty();
                    //2、重新查询--发起ajax请求
                    getUser(page)
                } else {
                    alert(result.message);
                }
            });

        }

        //修改模态框显示的函数
        //1、获取tr数据
        //2、将数据设置到标签中，显示模态框
        function onUpdate(item) {
            //获取当前的tr节点对象
            var tritem = item.parentNode.parentNode;
            console.log(tritem);
            //获取tr的所有子节点
            var childs = tritem.childNodes;
            // 获取tr中的td数值
            var id = childs[0].firstChild.innerText;
            var loginname = childs[1].innerText;
            var password = childs[2].innerText;
            var username = childs[3].firstChild.innerText;
            var status = childs[5].innerText;
            var imgname = childs[6].innerText;
            // 给模态框进行赋值
            $('#updateUserModal input:eq(0)').attr('value', id);
            $('#updateUserModal input:eq(1)').attr('value', loginname);
            $('#updateUserModal input:eq(2)').attr('value', username);
            $('#updateUserModal input:eq(3)').attr('value', password);
            // console.log(status);
            if (status == '超级管理员') {
                $('#updateUserModal select option[value="1"]').attr('selected', 'selected');
            } else {
                $('#updateUserModal select option[value="0"]').attr('selected', 'selected');
            }
            $('#model_imgname').text('头像:' + imgname);
            //显示模态框
            $('#updateUserModal').modal();
        }

        //修改请求
        function submitUpdateUser() {
            //1、获取表单数据
            var oData = new FormData(document.getElementById("updateUser"));
            //2、通过ajax请求提交操作
            $.ajax({
                url: "/OASystem/updateUser",//后台的接口地址
                type: "post",//post请求方式
                data: oData,//参数
                cache: false,
                processData: false,
                contentType: false,
                success: function (result) {
                    if (result.isok === true) {
                        alert('修改成功');
                        location.reload();//刷新页面
                    } else {
                        alert(result.message);
                    }
                }, error: function () {
                    alert("操作失败~");
                }
            });
        }

        //定义获取分页节点的函数   入参的result
        function getPageUl(result) {
            var ulitem = $('<ul class="pagination"></ul>');
            ulitem.append($(' <li class="page-item"><a class="page-link" href="#" id="page_mess">' +
                '             当前页码：' + result.pageInfo.pageIndex + '【共' + result.pageInfo.total + '条记录，' + result.pageInfo.pages + '页】' +
                '            </a></li>'));
            if (result.pageInfo.pageIndex > 1) {
                ulitem.append($('<li class="page-item"><a class="page-link"' +
                    '                                         href="javascript:jumpPage(1)">首页</a></li>'));
                ulitem.append($('<li class="page-item"><a class="page-link" href="javascript:jumpPage(' + (result.pageInfo.prePage) + ')">上一页</a> </li>'));
            }

            ulitem.append($('<li className="page-item"><a className="page-link" href="javascript:jumpPage(' + result.pageInfo.pageIndex + ')">' + result.pageInfo.pageIndex + '</a>' +
                '            </li>'));

            if (result.pageInfo.pageIndex < result.pageInfo.pages) {
                ulitem.append($('<li class="page-item"><a class="page-link" href="javascript:jumpPage(' + result.pageInfo.nextPage + ')">下一页</a> </li>'));
                ulitem.append($('<li className="page-item"><a className="page-link"' +
                    '                                         href="javascript:jumpPage(' + result.pageInfo.pages + ')">尾页</a>' +
                    '            </li>'));
            }
            ulitem.append($('<select id="pageSize" onchange="jumpPage(' + result.pageInfo.pageIndex + ')">' +
                '<option value="1" >1</option>' +
                '<option value="2" >2</option>' +
                '<option value="3" >3</option>' +
                '<option value="4" >4</option>' +
                '<option value="5" >5</option>' +
                '<option value="6" >6</option>' +
                '<option value="7" >7</option>' +
                '<option value="8" >8</option>' +
                '<option value="9" >9</option>' +
                '<option value="10" >10</option>' +
                '</select>'));
            //返回节点
            return ulitem;
        }

        //提供一个跳转页面的操作
        function jumpPage(page) {//分页模型数据
            var size = $("#pageSize").val();
            console.log(size);
            getUser(page,size);
        }


    </script>

    <!--common script for all pages-->
    <script src="assets/js/common-scripts.js"></script>

    <script type="text/javascript" src="assets/js/gritter/js/jquery.gritter.js"></script>
    <script type="text/javascript" src="assets/js/gritter-conf.js"></script>

    <!--script for this page-->
    <script src="assets/js/sparkline-chart.js"></script>
    <script src="assets/js/zabuto_calendar.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // var unique_id = $.gritter.add({
            //     // (string | mandatory) the heading of the notification
            //     title: 'Welcome to Dashgum!',
            //     // (string | mandatory) the text inside the notification
            //     text: 'Hover me to enable the Close Button. You can hide the left sidebar clicking on the button next to the logo. Free version for <a href="" target="_blank" style="color:#ffd777">BlackTie.co</a>.',
            //     // (string | optional) the image to display on the left
            //     image: 'assets/img/ui-sam.jpg',
            //     // (bool | optional) if you want it to fade out on its own or just sit there
            //     sticky: true,
            //     // (int | optional) the time you want it to be alive for before fading out
            //     time: '',
            //     // (string | optional) the class name you want to apply to that specific message
            //     class_name: 'my-sticky-class'
            // });
            $("#aside").load("demo_iframe.htm");
            return false;
        });
    </script>

    <script type="application/javascript">
        $(document).ready(function () {
            $("#date-popover").popover({html: true, trigger: "manual"});
            $("#date-popover").hide();
            $("#date-popover").click(function (e) {
                $(this).hide();
            });
            $("#my-calendar").zabuto_calendar({
                action: function () {
                    return myDateFunction(this.id, false);
                },
                action_nav: function () {
                    return myNavFunction(this.id);
                },
                today: true,
                ajax: {
                    url: "show_data.php?action=1",
                    modal: true
                },
                legend: [
                    {type: "text", label: "Special event", badge: "00"},
                    {type: "block", label: "Regular event",}
                ]
            });
        });
        //每当访问页面时自动调用该函数，然后修改菜单
        $(function () {
            getUser();
            //从本地的cookie中获取信息
            var roleCookie = getCookieByKey("roleCookie");
            //判断角色
            if (roleCookie != 'User') {
                $('#aside div ul li:eq(0)').remove();
                $('#aside div ul li ul li:eq(1)').remove();
                $('#aside div ul li ul li:eq(2)').remove();
                $('#aside div ul li ul li:eq(3)').remove();
                $('#aside div ul li ul li:eq(4)').remove();
            }
            //设置登录的用户名信息
            var objJson = JSON.parse(getCookieByKey("objCookie"));//将字符串格式化为json对象
            console.log(objJson);
            $('#NowUserName').text(objJson.username);
            // $.post('/OASystem/checkRole', {}, function (result) {
            //     //判断角色
            //     if (result.role != 'User'){//员工角色
            //         $('#aside div ul li:eq(0)').remove();
            //         $('#aside div ul li ul li:eq(1)').remove();
            //         $('#aside div ul li ul li:eq(2)').remove();
            //         $('#aside div ul li ul li:eq(3)').remove();
            //         $('#aside div ul li ul li:eq(4)').remove();
            //     }
            //     $('#NowUserName').text (result.nowObject.username);
            // });
        });
    </script>

    <style type="text/css">
        #pageSize {
            background: #fafdfe;
            height: 28px;
            width: 180px;
            line-height: 28px;
            border: 1px solid #9bc0dd;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }
    </style>

    </body>
</html>


